/*
 * @Author: yangrongxin
 * @Date: 2021-08-18 17:54:07
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:29:16
 */
import { useState, useEffect } from 'react';
import { View, Text, Video } from '@tarojs/components';
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import { useSafeArea } from '@/hooks/index';
import { AtIcon } from 'taro-ui';
import { MEDIA_TYPE } from '@/const/dataDictionary';
import { addFavorite } from '@/pages/AssessmentDetail/service';
import { loginWithFn } from '@/utils/common';
import { deleteFavorite } from '@/pages/My/compoents/MyFavorite/service';
import { getVideoUrlWithVideoId, getArticleDetail } from '../../service';
import styles from './index.module.less';

const VideoContent = () => {
  const [safeTop, safeBottom] = useSafeArea();

  const {
    params: { videoId, articleId },
  } = useRouter();

  // 控制当前的收藏状态
  const [isCollect, setIsCollect] = useState<boolean>(false);
  // 设置当前视频的播放状态
  const [playStatus, setPlayStatus] = useState<boolean>(false);
  const [src, setSrc] = useState<string>('');
  const [articleDetail, setArticleDetail] = useState<any>({
    authorName: '',
    title: '',
    subhead: '',
  });

  const videoThis = Taro.createVideoContext('currentVideoId');

  useEffect(() => {
    Taro.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#6D6D6D',
    });
    // 获取文章的详情内容
    Promise.all([
      getArticleDetail({
        articleId,
      }),
      getVideoUrlWithVideoId({
        getUrl: true, // 控制当前是否获取视频的地址 为false取的是视频凭证
        videoId,
        articleId,
      }),
    ]).then((res: any) => {
      const [articleRes, videoRes] = res;
      if (articleRes) {
        setIsCollect(articleRes.collect);
        setArticleDetail(articleRes);
      }
      if (videoRes && videoRes?.url) setSrc(videoRes.url);
    });
  }, []);

  /* 切换播放状态 */
  const changePlayStatus = () => {
    if (!playStatus) videoThis.play();
    if (playStatus) videoThis.pause();
    setPlayStatus(!playStatus);
  };

  /* 切换当前的收藏状态 */
  const changeCollect = () => {
    loginWithFn(() => {
      let requestFn = addFavorite;
      let params: any = {
        objectId: articleId,
        type: MEDIA_TYPE.WENZHANG, // 1 测评 2 宣教
      };
      if (isCollect) {
        requestFn = deleteFavorite;
        params = {
          objectIds: [articleId],
          type: MEDIA_TYPE.WENZHANG,
        };
      }
      requestFn(params).then((res: any) => {
        setIsCollect(!isCollect);
      });
    });
  };

  /* 分享当前的视频 */
  const onShareVideo = () => {
    Taro.showShareMenu({});
  };

  useShareAppMessage(() => {
    return {
      title,
      path: `/pages/PatientEducation/components/VideoContent/index?videoId=${videoId}&articleId=${articleId}`,
    };
  });

  const { authorName, title, subhead } = articleDetail;

  return (
    <View className={styles.container}>
      {/* 展示自定义的回退按钮 */}
      <View
        className={styles.returnIcon}
        style={{
          marginTop: safeTop,
        }}
        onClick={() => {
          Taro.navigateBack();
        }}
      >
        <AtIcon value="chevron-left" />
      </View>
      {/* 展示当前视频的内容 */}
      <View className={styles.content}>
        <Video
          id="currentVideoId"
          autoplay
          show-mute-btn // 是否展示静音按钮
          enable-play-gesture // 是否开启播放手势
          show-screen-lock-button // 展示锁屏按钮
          show-snapshot-button // 展示截屏按钮
          enable-auto-rotation // 开启横屏的时候自动全屏
          src={src}
          // src="https://hhtvod.cd120.info/209d317eae9c4df08118b3c4bc385d8a/1a0fffd9b32b48bfb28e21b2fb046bb0-03b40fa5871b5c40780373b9a7418e5d-sd.m3u8?auth_key=1629344264-30be8ba868204dd69f5d21858b531780-0-8088225abdefbada51fa0a7ad06e78cf"
          // src="https://hhtvod.cd120.info/66df6216172045939ffb4a725e8d95e1/e92dc2b3b62d477cb54d4c2569cbc4cd-7fd4596f661ea12ddccb0e02bf46e2d5-sd.m3u8?auth_key=1629352553-46affb6dd7ca417bb629282327c6d3fa-0-e0cd4f82392c5d630eaf47496f48a56b"
          // duration={timeInterval}
          direction={90}
          // object-fit="fill"
          // onPlay={() => setPlayVideoIdFn()}
          showPlayBtn={false}
          showFullscreenBtn={false}
          showMuteBtn={false}
        />
      </View>
      {/* 展示底部当前视频的标题 */}
      <View
        className={styles.titleInfo}
        style={{
          paddingBottom: `${safeBottom + 40}px`,
        }}
        onClick={changePlayStatus}
      >
        <View className={styles.title}>
          <Text>@{authorName}</Text>
          <Text>{title}</Text>
          <Text>{subhead}</Text>
        </View>
        <View className={styles.header}>
          <View onClick={changeCollect}>
            <AtIcon prefixClass="icon" value={isCollect ? 'fabulous-fill' : 'fabulous1'} />
          </View>
          {/* <View onClick={onShareVideo}>
            <AtIcon value="share" />
          </View> */}
        </View>
      </View>
    </View>
  );
};

export default VideoContent;
